<template>
	<view class="redeem">
		<view class="block block_1">
			<view class="info-list">
				<!-- select-icon -->
				<view class="list-item ">
					<view class="text">
						兑换门店：
					</view>
					<view class="input data">
						<text>森海3店</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tabs">
			<view class="left">
				<view class="type" v-for="(item, index) in navbarList" :key="index">
					<text class="text" :class="{'active':isActive === index}" @tap="selectType(index)">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="block_2">
			<view class="list">
				<view class="list-item">
					<view class="left">
						<img src="" alt="">
					</view>
					<view class="right">
						<text class="line_1 title">古法推拿</text>
						<view class="line_2 time">
							<img src="static/serve/time.png" alt="">
							<text>60分钟</text>
						</view>
						<view class="line_3">
							<view class="integral">
								<text class="num">1000</text>
								<text class="price">积分+99元</text>
							</view>
							<view class="exchange-btn">
								立即兑换
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				navbarList: [{
						name: "全部"
					},
					{
						name: "推荐"
					}
				]
			};
		},
		methods: {
			selectType(i) {
				this.isActive = i
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F5F6F7;
	}
	.redeem {
		.block_1 {
			margin: 18rpx 0;
			background-color: #fff;
			.info-list {
				margin: 0 30rpx;
				.select-icon {
					&::after {
							display: inline-block;
							content: '';
							// position: relative;
							// right: 26rpx;
							width: 18rpx;
							height: 18rpx;
							border-top: 1px solid #acacac;
							border-right: 1px solid #acacac;
							transform: rotate(45deg);
						}
				}
				.list-item {
					display: flex;
					align-items: center;
					height: 100rpx;
					font-size: 28rpx;
			
					.text {
						padding-left: 4rpx;
						margin-right: 40rpx;
						width: 122rpx;
						white-space: nowrap;
						text-align: left;
						color: #333333;
					}
			
					.input {
						flex: 1;
			
						.uni-input {}
			
						/deep/ .uni-input-placeholder {
							font-size: 28rpx;
							color: #999999;
						}
			
						.select {
							font-size: 28rpx;
							color: #999999;
						}
					}
			
					.data {
						display: flex;
						align-items: center;
			
						.uni-input {
							flex: 1;
						}
			
						img {
							margin-right: 24rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
			
					.right-text {
						margin-right: 20rpx;
					}
				}
			}
		}
		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 44rpx;
			padding-right: 26rpx;
			height: 84rpx;
			.left {
				display: flex;
				.type {
					display: flex;
					align-items: center;
					margin-right: 50rpx;
					font-size: 30rpx;
					color: #121212;
					.active {
						display: inline-flex;
						flex-direction: column;
						align-items: center;
						position: relative;
						color: #121212;
						
						&::after {
							content: '';
							position: absolute;
							top: 50rpx;
							width: 30rpx;
							height: 6rpx;
							background-color: #07C160;
							border-radius: 2rpx;
						}
					}
				}
			}
		}
		.block_2 {
			.list {
				.list-item {
					display: flex;
					margin: 18rpx 20rpx;
					width: 710rpx;
					height: 200rpx;
					background: #FFFFFF;
					.left {
						img {
							width: 240rpx;
							height: 200rpx;
						}
					}
					.right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin: 26rpx 24rpx 18rpx;
						.line_1 {
							font-size: 32rpx;
							font-weight: bold;
							color: #333333;
						}
						.line_2 {
							margin-bottom: 8rpx;
							font-size: 26rpx;
							color: #999999;
							
							img {
								width: 26rpx;
								height: 26rpx;
								vertical-align: middle;
							}
							text {
								vertical-align: middle;
							}
						}
						.line_3 {
							display: flex;
							justify-content: space-between;
							.integral {
								color: #FF6C00;
								.num {
									font-size: 36rpx;
								}
								.price {
									margin-left: 8rpx;
									font-size: 22rpx;
								}
							}
							.exchange-btn {
								width: 150rpx;
								height: 52rpx;
								line-height: 52rpx;
								font-size: 26rpx;
								color: #FFFFFF;
								background: #07C160;
								text-align: center;
								box-shadow: 0px 6px 6px 0px rgba(7,193,96,0.1);
								border-radius: 26px;
							}
						}
					}
				}
			}
		}
		
	}
</style>
